<template>
  <div class="github-login">
    <div class="login-card">
      <el-icon class="github-logo">
        <Monitor />
      </el-icon>
      <h2>Sign in to VocabSphere</h2>
      <el-input
        style=""
        v-model="username"
        placeholder="Username or email address"
        size="large"
      />
      <el-input
        v-model="password"
        placeholder="Password"
        show-password
        size="large"
      />
      <!--  -->
      <el-button
        type="primary"
        class="sign-in-btn"
        @click="handleLogin"
        :loading="isLoading"
      >
        Sign in
      </el-button>

      <!--   -->
      <div class="login-footer">
        <a href="#">
          <RouterLink style="all: unset" to="/Register"
            >Create an account</RouterLink
          >
        </a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { login } from "../../api/authService.js";

const username = ref("admin");
const password = ref("123456");
const isLoading = ref(false); // 加载状态

const router = useRouter();

const handleLogin = async () => {
  isLoading.value = true; // 启动加载动画

  setTimeout(async () => {
    // 延迟 1 秒再执行登录逻辑
    const response = await login(username.value, password.value);

    if (response.success) {
      // console.log(response.userId);
      localStorage.setItem('userId', response.userId);
      localStorage.setItem("token", response.token);
      router.push("/home");
    } else {
      alert(response.message);
      console.error("Login failed:", response.message);
    }

    isLoading.value = false; // 结束加载动画
  }, 1000);
};
</script>



<style lang="scss" scoped>
.github-login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: var(--btn-text);
  background: linear-gradient(
    var(--bg-color-deg),
    var(--bg-color-change1),
    var(--bg-color-change2),
    var(--bg-color-change3)
  );
  background-size: 400% 400%;
  animation: gradientAnimation 10s infinite alternate ease-in-out;
  transition: background 1s, color 1s;

  @keyframes gradientAnimation {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }
}

.login-card {
  background: var(--bg-color-flag);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
  text-align: center;
  width: 350px;

  // 初始状态 (透明 + 上移)
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeIn 0.6s ease-out forwards; // 启动动画

  @keyframes fadeIn {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .github-logo {
    font-size: 3rem;
  }

  h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .el-input {
    margin-bottom: 1rem;
  }

  .sign-in-btn {
    width: 100%;
    background: #2f3e53;
    border: none;
    font-weight: bold;
    transition: background 0.3s;

    &:hover {
      background: #272727;
    }
  }

  .login-footer {
    margin-top: 1rem;

    a {
      color: #58a6ff;
      text-decoration: none;
      font-size: 0.9rem;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>
